<template>
  <div>
    <vab-card>
      <div class="flex_sb_wrap">
        <div class="flex">
          <p class="title">采购提报单-20230601001</p>
          <span>创建人：XXX</span>
          <span>创建时间：2023/06/01 13:23:45</span>
          <span>状态：创建中</span>
        </div>
        <div class="flex_end">
          <el-button type="primary" @click="handleClick('update')">
            暂存
          </el-button>
          <el-button type="primary" @confirm="handleClick('submit')">
            提交
          </el-button>
          <el-button type="info" @click="handleClick('close')">取消</el-button>
        </div>
      </div>
    </vab-card>
    <vab-card>
      <el-text class="mx-1 marb-20" size="large">采购基础信息</el-text>
      <el-form
        ref="ruleFormRef"
        :label-position="labelPosition"
        label-width="120px"
        :model="ruleForm"
        :rules="rules"
      >
        <el-row :gutter="24">
          <!-- 左侧 -->
          <el-col :span="12" :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="买方" prop="">
              <el-autocomplete
                v-model="ruleForm.buyer"
                :fetch-suggestions="querySearch"
                clearable
                class="inline-input w-50"
              />
            </el-form-item>
            <el-form-item label="开票类型" prop="region">
              <el-select v-model="ruleForm.region">
                <el-option label="增值税专用发票" value="1" />
                <el-option label="普通发票" value="0" />
              </el-select>
            </el-form-item>
            <el-form-item label="发票抬头" prop="count">
              <el-input v-model="ruleForm.count" />
            </el-form-item>
            <el-form-item label="公司税号" prop="count">
              <el-input v-model="ruleForm.count" />
            </el-form-item>
            <el-form-item label="期望运输方式" prop="region">
              <el-select v-model="ruleForm.region">
                <el-option label="德邦速递" value="1" />
                <el-option label="快马加鞭" value="0" />
              </el-select>
            </el-form-item>
            <el-form-item label="期望付款方式" prop="region">
              <el-select v-model="ruleForm.region">
                <el-option label="运费到付" value="1" />
                <el-option label="运费报付" value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 右侧 -->
          <el-col :span="12" :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="收货地址" prop="shipping_address">
              <div class="border">
                <el-input :rows="2" v-model="ruleForm.shipping_address" />
                <div class="flex_just_end" style="margin-top: 12px">
                  <el-button
                    size="small"
                    type="primary"
                    @click="handleClick('identify')"
                  >
                    识别
                  </el-button>
                  <el-button size="small" @click="handleClick('empty')">
                    清空
                  </el-button>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="收货地址" prop="address">
              <el-select v-model="ruleForm.address">
                <el-option label="增值税专用发票" value="1" />
                <el-option label="普通发票" value="0" />
              </el-select>
            </el-form-item>
            <el-form-item label="详细地址" prop="details">
              <el-input v-model="ruleForm.details" />
            </el-form-item>
            <el-form-item label="收货联系人" prop="contacts">
              <el-input v-model="ruleForm.contacts" />
            </el-form-item>
            <el-form-item label="联系电话" prop="mobile">
              <el-input v-model="ruleForm.mobile" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <TableMode />
    </vab-card>
  </div>
</template>
<script lang="ts" setup>
  import { FormInstance, FormRules } from 'element-plus'
  import TableMode from './components/TableMode.vue'

  defineOptions({
    name: 'Cooperate',
  })

  interface RuleForm {
    buyer: string
    region: string
    count: string
    date1: string
    date2: string
    delivery: boolean
    type: string[]
    resource: string
    desc: string
    details: string
    mobile: string
    contacts: string
    address: string
    shipping_address: string
  }

  const labelPosition: any = ref('right')
  const ruleFormRef = ref<FormInstance>()
  const ruleForm = reactive<RuleForm>({
    buyer: '山东多乐国际贸易有限公司',
    region: '1',
    count: '山东多乐国际贸易有限公司',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
    details: '',
    mobile: '',
    contacts: '',
    address: '',
    shipping_address: '',
  })

  const handleClick = (key: string) => {
    // 识别
    if (key == 'identify') {
      const [result] = window?.AddressParse.parse(ruleForm.shipping_address)
      const { details, name, mobile, city, area, code } = result
      ruleForm.details = details
      ruleForm.contacts = name
      ruleForm.mobile = mobile
      ruleForm.address = `${city}/${area}`
    }
    // 清空
    if (key == 'empty') {
      ruleForm.shipping_address = ''
    }
  }

  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        console.log('submit!')
      } else {
        console.log('error submit!', fields)
      }
    })
  }
  const rules = reactive<FormRules<RuleForm>>({
    buyer: [
      {
        required: true,
        message: '请输入买方',
        trigger: 'blur',
      },
      { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    region: [
      {
        required: true,
        message: 'Please select Activity zone',
        trigger: 'change',
      },
    ],
    count: [
      {
        required: true,
        message: 'Please select Activity count',
        trigger: 'change',
      },
    ],
    date1: [
      {
        type: 'date',
        required: true,
        message: 'Please pick a date',
        trigger: 'change',
      },
    ],
    date2: [
      {
        type: 'date',
        required: true,
        message: 'Please pick a time',
        trigger: 'change',
      },
    ],
    type: [
      {
        type: 'array',
        required: true,
        message: 'Please select at least one activity type',
        trigger: 'change',
      },
    ],
    resource: [
      {
        required: true,
        message: 'Please select activity resource',
        trigger: 'change',
      },
    ],
    desc: [
      {
        required: true,
        message: 'Please input activity form',
        trigger: 'blur',
      },
    ],
  })

  /**
   * 模糊查询
   */
  interface RestaurantItem {
    value: string
  }
  const restaurants = ref<RestaurantItem[]>([])
  const querySearch = (queryString: string, cb: any) => {
    const results = queryString
      ? restaurants.value.filter(createFilter(queryString))
      : restaurants.value
    // call callback function to return suggestions
    cb(results)
  }
  const createFilter = (queryString: string) => {
    return (restaurant: RestaurantItem) => {
      return (
        restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
      )
    }
  }
  const loadAll = () => {
    return [
      { value: '山东多乐国际贸易有限公司' },
      { value: '青岛黛优佳生物科技有限公司' },
      { value: '青岛市崂山区市场监督管理局' },
      { value: '华为技术有限公司' },
    ]
  }

  onMounted(() => {
    restaurants.value = loadAll()
  })
</script>
<style lang="scss" scoped>
  .marb-20 {
    display: inline-block;
    margin-bottom: 20px;
  }
  .border {
    width: 100%;
    border: 1px solid rgba(192, 196, 204, 0.6);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 12px;
    border-radius: 5px;
    transition: var(--el-transition-box-shadow);
    transform: translate3d(0, 0, 0);
    &:hover {
      border: 1px solid rgba(192, 196, 204, 0.8);
    }
    :deep() {
      .el-input__wrapper {
        box-shadow: none;
      }
      .el-input__wrapper:hover {
        box-shadow: none;
      }
    }
  }
</style>
